﻿<div id="case_demo" style="overflow: hidden; width: 185px; height: 200px;">
  <div id="case_demo02">
    #foreach($item in $biz.GetList("product",8,"is_red=1"))
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center"><a href="$html.url('show',${item.id})" title="${item.title}"><img src="${item.img_url}" alt="${item.title}" width="150" style="border: solid 1px #ccc" /></a></td>
      </tr>
      <tr>
        <td align="center"><a href="$html.url('show',${item.id})" title="${item.title}">${item.title}</a></td>
      </tr>
    </table>
    #end
  </div>
  <div id="case_demo03"> </div>
</div>
<script type="text/javascript">
    var speed1 = 100;
    document.getElementById("case_demo03").innerHTML = document.getElementById("case_demo02").innerHTML;
    function CaseMarquee() {

        if (document.getElementById("case_demo03").offsetHeight - document.getElementById("case_demo").scrollTop <= 0) {
            document.getElementById("case_demo").scrollTop -= document.getElementById("case_demo03").offsetHeight;
        }
        else {
            document.getElementById("case_demo").scrollTop++;
        }
    }
    var CaseMarqueeId = setInterval(CaseMarquee, speed1);
    document.getElementById("case_demo").onmouseover = function () { clearInterval(CaseMarqueeId); }
    document.getElementById("case_demo").onmouseout = function () { CaseMarqueeId = setInterval(CaseMarquee, speed1); } 
</script>
